<template>
    <div class="daily page">
        <formHeader :title="'每日优选'" newColor></formHeader>
        <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-up="onPullingUp">
            <div class="content">
                <div class="slide_item" @click="turn('/detail?id='+item.id)" v-for="item in dailyList" :key="item.id">
                    <img :src="imgH+item.img" alt="">
                    <div class="goods_detail">
                        <p class="goods_name">{{item.name}}</p>
                        <p class="goods_desc">{{item.info}}</p>
                        <div class="goods_shop">
                            <div class="goods_price">
                                <p class="old">¥{{item.oldPrice}}</p>
                                <p class="new">¥{{item.nowPrice}}</p>
                            </div>
                            <div class="buy">购买</div>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;height: 50px"></div>
            </div>
        </cube-scroll>
    </div>
</template>

<script>
    import {getDailyList} from '@/api/home'
    import formHeader from '@/components/form-header'
    export default {
        name: "index",
        components:{formHeader},
        data(){
            return{
                page:1,
                options:{pullUpLoad: true},
                dailyList:[],
                imgH: process.env.VUE_APP_IMG_DOMAIN,
            }
        },
        activated() {
            this.onPullingUp()
        },
        methods:{
            onPullingUp(){
                getDailyList(this.page).then(res=>{
                    if (this.page==1){
                        this.dailyList = res.data
                    }else {
                        this.dailyList = this.dailyList.concat(res.data)
                    }
                    this.page++
                    this.$nextTick(()=>{
                        this.$refs.scroll.refresh()
                        this.$refs.scroll.forceUpdate(true, true)
                    })
                })
            },
            turn(path){
                this.$router.push({
                    path
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.daily
    background-color: #f4f3f3
    .content
        margin-top 56px
        padding 0 12px
    .slide_item
        display flex
        background-color: #fff
        padding 6.5px
        margin-top 9px
        img
            width: 103px
            height: 103px
            margin-right 11.5px
            margin-left 3px
            object-fit:cover

        .goods_detail
            flex 1

            .goods_name
                color #333
                width 220px
                font-size 15px
                line-height 25px
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;

            .goods_desc
                width 220px
                margin-top 5px
                font-size 10px
                color #999
                white-space: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;

            .goods_shop
                display flex
                justify-content space-between
                align-items center
                margin-top 20px

                .goods_price
                    .old
                        font-size 12px
                        color #c8c8c8
                        text-decoration: line-through

                    .new
                        font-size 18px
                        color #00d6c0

                .buy
                    width 61px
                    height 27px
                    background-color: #00d6c0
                    color #FFFFFF
                    font-size 14px
                    text-align center
                    line-height 27px
                    border-radius 7px 0 7px 0

</style>
